<template>
	<div class="page">
		<!-- 搜索页面 -->
		<el-form :model="attendanceRecordSearch" size="small" :inline="true" class="query-form"> 
			<el-form-item prop="date">
				<el-date-picker v-model="attendanceRecordSearch.date" format="yyyy-MM" value-format="yyyy-MM"
					type="month" size="small" :clearable="false" placeholder="请选择日期"></el-date-picker>
			</el-form-item>
			<el-form-item prop="username">
				<el-input size="small" v-model="attendanceRecordSearch.username" autocomplete="off" placeholder="姓名">
				</el-input>
			</el-form-item>
			<el-form-item prop="department">
				<el-select v-model="attendanceRecordSearch.office" placeholder="请选择部门" style="width: 100%" size="small">
					      
					<el-option v-for="(item, index) in offices" :label="item.name" :value="item.id" :key="index">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item prop="phone"> 
				<el-input size="small" v-model="attendanceRecordSearch.phone" autocomplete="off" maxlength="11"
					placeholder="电话"></el-input>
			</el-form-item>
			<el-form-item style="float: right">
				<el-button size="small" type="primary" @click="getCompleteDocumentation">查询</el-button>
				<el-button size="small" style="margin-left: 10px" @click="resetSearch">重置</el-button> 
			</el-form-item>                              
		</el-form>
		<div class="top" style="background-color: #fff; padding: 10px">
			<el-tabs type="border-card" @tab-click="handleClick" v-model="attachedListNum" style="padding: 10px 0px">
				<el-tab-pane v-for="(item, index) in attachedList" :key="index" :label="item.name" :name="item.name">
					<el-table :data="attachedListTable" ref="attachedListTables" height="calc(100% - 80px)"
						:cell-style="cellStyle" style="border: 1px solid #d6cfe2; min-height: 380px" size="small"
						:header-cell-class-name="cellHeadStyle" :row-class-name="tableRowClassName" row-key="id"
						:tree-props="{ children: 'children', hasChildren: 'hasChildren' }" v-loading="loading"
						@cell-click="cellDetail">
						<el-table-column type="selection" width="55" align="center"></el-table-column>
						<el-table-column prop="username" label="姓名" width="100" align="center" fixed="left"
							show-overflow-tooltip></el-table-column>
						<el-table-column prop="office.name" label="部门" width="100" align="center" content="提示文字"
							show-overflow-tooltip></el-table-column>
						<el-table-column prop="phone" label="电话" width="110" show-overflow-tooltip align="center">
							<template
								slot-scope="scope">{{scope.row.phone?scope.row.phone.replace(/(\d{3})(\d{4})(\d{4})/,"$1****$3"):""}}</template>
						</el-table-column>
						<el-table-column width="50" align="center" prop="one" label="1">
							<template slot-scope="scope">
								<div v-if="scope.row.one == '正常'">
									<i class="el-icon-circle-check" style="color: rgb(56, 187, 246)"></i>
								</div>
								<div v-if="scope.row.one == '迟到'">
									<i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
								</div>
								<div v-if="scope.row.one == '早退'">
									<i class="el-icon-warning-outline" style="color: rgb(184, 146, 255)"></i>
								</div>
								<div v-if="scope.row.one == '旷工'">
									<i class="el-icon-circle-close" style="color: rgb(253, 116, 142)"></i>
								</div>
								<div v-if="scope.row.one == '漏签'">
									<i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
								</div>
								<div v-if="scope.row.one == '请假'">
									<i class="el-icon-s-claim" style="color: rgb(77, 194, 247)"></i>
								</div>
								<div v-if="scope.row.one == '出差'">
									<i class="el-icon-s-promotion" style="color: rgb(72, 198, 80)"></i>
								</div>
								<div v-if="scope.row.one == '外出'">
									<i class="el-icon-suitcase" style="color: rgb(90, 147, 255)"></i>
								</div>
								<div v-if="scope.row.one == '加班'">
									<i class="el-icon-alarm-clock" style="color: rgb(141, 107, 243)"></i>
								</div>
								<div v-if="scope.row.one == '公休'">
									<i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="two" label="2" width="50" align="center">
							<template slot-scope="scope">
								<div v-if="scope.row.two == '正常'">
									<i class="el-icon-circle-check" style="color: rgb(56, 187, 246)"></i>
								</div>
								<div v-if="scope.row.two == '迟到'">
									<i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
								</div>
								<div v-if="scope.row.two == '早退'">
									<i class="el-icon-warning-outline" style="color: rgb(184, 146, 255)"></i>
								</div>
								<div v-if="scope.row.two == '旷工'">
									<i class="el-icon-circle-close" style="color: rgb(253, 116, 142)"></i>
								</div>
								<div v-if="scope.row.two == '漏签'">
									<i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
								</div>
								<div v-if="scope.row.two == '请假'">
									<i class="el-icon-s-claim" style="color: rgb(77, 194, 247)"></i>
								</div>
								<div v-if="scope.row.two == '出差'">
									<i class="el-icon-s-promotion" style="color: rgb(72, 198, 80)"></i>
								</div>
								<div v-if="scope.row.two == '外出'">
									<i class="el-icon-suitcase" style="color: rgb(90, 147, 255)"></i>
								</div>
								<div v-if="scope.row.two == '加班'">
									<i class="el-icon-alarm-clock" style="color: rgb(141, 107, 243)"></i>
								</div>
								<div v-if="scope.row.two == '公休'">
									<i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="three" label="3" width="50" align="center">
							<template slot-scope="scope">
								<div v-if="scope.row.three == '正常'">
									<i class="el-icon-circle-check" style="color: rgb(56, 187, 246)"></i>
								</div>
								<div v-if="scope.row.three == '迟到'">
									<i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
								</div>
								<div v-if="scope.row.three == '早退'">
									<i class="el-icon-warning-outline" style="color: rgb(184, 146, 255)"></i>
								</div>
								<div v-if="scope.row.three == '旷工'">
									<i class="el-icon-circle-close" style="color: rgb(253, 116, 142)"></i>
								</div>
								<div v-if="scope.row.three == '漏签'">
									<i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
								</div>
								<div v-if="scope.row.three == '请假'">
									<i class="el-icon-s-claim" style="color: rgb(77, 194, 247)"></i>
								</div>
								<div v-if="scope.row.three == '出差'">
									<i class="el-icon-s-promotion" style="color: rgb(72, 198, 80)"></i>
								</div>
								<div v-if="scope.row.three == '外出'">
									<i class="el-icon-suitcase" style="color: rgb(90, 147, 255)"></i>
								</div>
								<div v-if="scope.row.three == '加班'">
									<i class="el-icon-alarm-clock" style="color: rgb(141, 107, 243)"></i>
								</div>
								<div v-if="scope.row.three == '公休'">
									<i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="four" label="4" width="50" align="center">
							<template slot-scope="scope">
								<div v-if="scope.row.four == '正常'">
									<i class="el-icon-circle-check" style="color: rgb(56, 187, 246)"></i>
								</div>
								<div v-if="scope.row.four == '迟到'">
									<i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
								</div>
								<div v-if="scope.row.four == '早退'">
									<i class="el-icon-warning-outline" style="color: rgb(184, 146, 255)"></i>
								</div>
								<div v-if="scope.row.four == '旷工'">
									<i class="el-icon-circle-close" style="color: rgb(253, 116, 142)"></i>
								</div>
								<div v-if="scope.row.four == '漏签'">
									<i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
								</div>
								<div v-if="scope.row.four == '请假'">
									<i class="el-icon-s-claim" style="color: rgb(77, 194, 247)"></i>
								</div>
								<div v-if="scope.row.four == '出差'">
									<i class="el-icon-s-promotion" style="color: rgb(72, 198, 80)"></i>
								</div>
								<div v-if="scope.row.four == '外出'">
									<i class="el-icon-suitcase" style="color: rgb(90, 147, 255)"></i>
								</div>
								<div v-if="scope.row.four == '加班'">
									<i class="el-icon-alarm-clock" style="color: rgb(141, 107, 243)"></i>
								</div>
								<div v-if="scope.row.four == '公休'">
									<i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="five" label="5" width="50" align="center">
							<template slot-scope="scope">
								<div v-if="scope.row.five == '正常'">
									<i class="el-icon-circle-check" style="color: rgb(56, 187, 246)"></i>
								</div>
								<div v-if="scope.row.five == '迟到'">
									<i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
								</div>
								<div v-if="scope.row.five == '早退'">
									<i class="el-icon-warning-outline" style="color: rgb(184, 146, 255)"></i>
								</div>
								<div v-if="scope.row.five == '旷工'">
									<i class="el-icon-circle-close" style="color: rgb(253, 116, 142)"></i>
								</div>
								<div v-if="scope.row.five == '漏签'">
									<i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
								</div>
								<div v-if="scope.row.five == '请假'">
									<i class="el-icon-s-claim" style="color: rgb(77, 194, 247)"></i>
								</div>
								<div v-if="scope.row.five == '出差'">
									<i class="el-icon-s-promotion" style="color: rgb(72, 198, 80)"></i>
								</div>
								<div v-if="scope.row.five == '外出'">
									<i class="el-icon-suitcase" style="color: rgb(90, 147, 255)"></i>
								</div>
								<div v-if="scope.row.five == '加班'">
									<i class="el-icon-alarm-clock" style="color: rgb(141, 107, 243)"></i>
								</div>
								<div v-if="scope.row.five == '公休'">
									<i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="six" label="6" width="50" align="center">
							<template slot-scope="scope">
								<div v-if="scope.row.six == '正常'">
									<i class="el-icon-circle-check" style="color: rgb(56, 187, 246)"></i>
								</div>
								<div v-if="scope.row.six == '迟到'">
									<i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
								</div>
								<div v-if="scope.row.six == '早退'">
									<i class="el-icon-warning-outline" style="color: rgb(184, 146, 255)"></i>
								</div>
								<div v-if="scope.row.six == '旷工'">
									<i class="el-icon-circle-close" style="color: rgb(253, 116, 142)"></i>
								</div>
								<div v-if="scope.row.six == '漏签'">
									<i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
								</div>
								<div v-if="scope.row.six == '请假'">
									<i class="el-icon-s-claim" style="color: rgb(77, 194, 247)"></i>
								</div>
								<div v-if="scope.row.six == '出差'">
									<i class="el-icon-s-promotion" style="color: rgb(72, 198, 80)"></i>
								</div>
								<div v-if="scope.row.six == '外出'">
									<i class="el-icon-suitcase" style="color: rgb(90, 147, 255)"></i>
								</div>
								<div v-if="scope.row.six == '加班'">
									<i class="el-icon-alarm-clock" style="color: rgb(141, 107, 243)"></i>
								</div>
								<div v-if="scope.row.six == '公休'">
									<i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="seven" label="7" width="50" align="center">
							<template slot-scope="scope">
								<div v-if="scope.row.seven == '正常'">
									<i class="el-icon-circle-check" style="color: rgb(56, 187, 246)"></i>
								</div>
								<div v-if="scope.row.seven == '迟到'">
									<i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
								</div>
								<div v-if="scope.row.seven == '早退'">
									<i class="el-icon-warning-outline" style="color: rgb(184, 146, 255)"></i>
								</div>
								<div v-if="scope.row.seven == '旷工'">
									<i class="el-icon-circle-close" style="color: rgb(253, 116, 142)"></i>
								</div>
								<div v-if="scope.row.seven == '漏签'">
									<i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
								</div>
								<div v-if="scope.row.seven == '请假'">
									<i class="el-icon-s-claim" style="color: rgb(77, 194, 247)"></i>
								</div>
								<div v-if="scope.row.seven == '出差'">
									<i class="el-icon-s-promotion" style="color: rgb(72, 198, 80)"></i>
								</div>
								<div v-if="scope.row.seven == '外出'">
									<i class="el-icon-suitcase" style="color: rgb(90, 147, 255)"></i>
								</div>
								<div v-if="scope.row.seven == '加班'">
									<i class="el-icon-alarm-clock" style="color: rgb(141, 107, 243)"></i>
								</div>
								<div v-if="scope.row.seven == '公休'">
									<i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="eight" label="8" width="50" align="center">
							<template slot-scope="scope">
								<div v-if="scope.row.eight == '正常'">
									<i class="el-icon-circle-check" style="color: rgb(56, 187, 246)"></i>
								</div>
								<div v-if="scope.row.eight == '迟到'">
									<i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
								</div>
								<div v-if="scope.row.eight == '早退'">
									<i class="el-icon-warning-outline" style="color: rgb(184, 146, 255)"></i>
								</div>
								<div v-if="scope.row.eight == '旷工'">
									<i class="el-icon-circle-close" style="color: rgb(253, 116, 142)"></i>
								</div>
								<div v-if="scope.row.eight == '漏签'">
									<i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
								</div>
								<div v-if="scope.row.eight == '请假'">
									<i class="el-icon-s-claim" style="color: rgb(77, 194, 247)"></i>
								</div>
								<div v-if="scope.row.eight == '出差'">
									<i class="el-icon-s-promotion" style="color: rgb(72, 198, 80)"></i>
								</div>
								<div v-if="scope.row.eight == '外出'">
									<i class="el-icon-suitcase" style="color: rgb(90, 147, 255)"></i>
								</div>
								<div v-if="scope.row.eight == '加班'">
									<i class="el-icon-alarm-clock" style="color: rgb(141, 107, 243)"></i>
								</div>
								<div v-if="scope.row.eight == '公休'">
									<i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="nine" label="9" width="50" align="center">
							<template slot-scope="scope">
								<div v-if="scope.row.nine == '正常'">
									<i class="el-icon-circle-check" style="color: rgb(56, 187, 246)"></i>
								</div>
								<div v-if="scope.row.nine == '迟到'">
									<i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
								</div>
								<div v-if="scope.row.nine == '早退'">
									<i class="el-icon-warning-outline" style="color: rgb(184, 146, 255)"></i>
								</div>
								<div v-if="scope.row.nine == '旷工'">
									<i class="el-icon-circle-close" style="color: rgb(253, 116, 142)"></i>
								</div>
								<div v-if="scope.row.nine == '漏签'">
									<i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
								</div>
								<div v-if="scope.row.nine == '请假'">
									<i class="el-icon-s-claim" style="color: rgb(77, 194, 247)"></i>
								</div>
								<div v-if="scope.row.nine == '出差'">
									<i class="el-icon-s-promotion" style="color: rgb(72, 198, 80)"></i>
								</div>
								<div v-if="scope.row.nine == '外出'">
									<i class="el-icon-suitcase" style="color: rgb(90, 147, 255)"></i>
								</div>
								<div v-if="scope.row.nine == '加班'">
									<i class="el-icon-alarm-clock" style="color: rgb(141, 107, 243)"></i>
								</div>
								<div v-if="scope.row.nine == '公休'">
									<i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="ten" label="10" width="50" align="center">
							<template slot-scope="scope">
								<div v-if="scope.row.ten == '正常'">
									<i class="el-icon-circle-check" style="color: rgb(56, 187, 246)"></i>
								</div>
								<div v-if="scope.row.ten == '迟到'">
									<i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
								</div>
								<div v-if="scope.row.ten == '早退'">
									<i class="el-icon-warning-outline" style="color: rgb(184, 146, 255)"></i>
								</div>
								<div v-if="scope.row.ten == '旷工'">
									<i class="el-icon-circle-close" style="color: rgb(253, 116, 142)"></i>
								</div>
								<div v-if="scope.row.ten == '漏签'">
									<i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
								</div>
								<div v-if="scope.row.ten == '请假'">
									<i class="el-icon-s-claim" style="color: rgb(77, 194, 247)"></i>
								</div>
								<div v-if="scope.row.ten == '出差'">
									<i class="el-icon-s-promotion" style="color: rgb(72, 198, 80)"></i>
								</div>
								<div v-if="scope.row.ten == '外出'">
									<i class="el-icon-suitcase" style="color: rgb(90, 147, 255)"></i>
								</div>
								<div v-if="scope.row.ten == '加班'">
									<i class="el-icon-alarm-clock" style="color: rgb(141, 107, 243)"></i>
								</div>
								<div v-if="scope.row.ten == '公休'">
									<i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="eleven" label="11" width="50" align="center">
							<template slot-scope="scope">
								<div v-if="scope.row.eleven == '正常'">
									<i class="el-icon-circle-check" style="color: rgb(56, 187, 246)"></i>
								</div>
								<div v-if="scope.row.eleven == '迟到'">
									<i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
								</div>
								<div v-if="scope.row.eleven == '早退'">
									<i class="el-icon-warning-outline" style="color: rgb(184, 146, 255)"></i>
								</div>
								<div v-if="scope.row.eleven == '旷工'">
									<i class="el-icon-circle-close" style="color: rgb(253, 116, 142)"></i>
								</div>
								<div v-if="scope.row.eleven == '漏签'">
									<i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
								</div>
								<div v-if="scope.row.eleven == '请假'">
									<i class="el-icon-s-claim" style="color: rgb(77, 194, 247)"></i>
								</div>
								<div v-if="scope.row.eleven == '出差'">
									<i class="el-icon-s-promotion" style="color: rgb(72, 198, 80)"></i>
								</div>
								<div v-if="scope.row.eleven == '外出'">
									<i class="el-icon-suitcase" style="color: rgb(90, 147, 255)"></i>
								</div>
								<div v-if="scope.row.eleven == '加班'">
									<i class="el-icon-alarm-clock" style="color: rgb(141, 107, 243)"></i>
								</div>
								<div v-if="scope.row.eleven == '公休'">
									<i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="twelve" label="12" width="50" align="center">
							<template slot-scope="scope">
								<div v-if="scope.row.twelve == '正常'">
									<i class="el-icon-circle-check" style="color: rgb(56, 187, 246)"></i>
								</div>
								<div v-if="scope.row.twelve == '迟到'">
									<i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
								</div>
								<div v-if="scope.row.twelve == '早退'">
									<i class="el-icon-warning-outline" style="color: rgb(184, 146, 255)"></i>
								</div>
								<div v-if="scope.row.twelve == '旷工'">
									<i class="el-icon-circle-close" style="color: rgb(253, 116, 142)"></i>
								</div>
								<div v-if="scope.row.twelve == '漏签'">
									<i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
								</div>
								<div v-if="scope.row.twelve == '请假'">
									<i class="el-icon-s-claim" style="color: rgb(77, 194, 247)"></i>
								</div>
								<div v-if="scope.row.twelve == '出差'">
									<i class="el-icon-s-promotion" style="color: rgb(72, 198, 80)"></i>
								</div>
								<div v-if="scope.row.twelve == '外出'">
									<i class="el-icon-suitcase" style="color: rgb(90, 147, 255)"></i>
								</div>
								<div v-if="scope.row.twelve == '加班'">
									<i class="el-icon-alarm-clock" style="color: rgb(141, 107, 243)"></i>
								</div>
								<div v-if="scope.row.twelve == '公休'">
									<i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="thirteen" label="13" width="50" align="center">
							<template slot-scope="scope">
								<div v-if="scope.row.thirteen == '正常'">
									<i class="el-icon-circle-check" style="color: rgb(56, 187, 246)"></i>
								</div>
								<div v-if="scope.row.thirteen == '迟到'">
									<i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
								</div>
								<div v-if="scope.row.thirteen == '早退'">
									<i class="el-icon-warning-outline" style="color: rgb(184, 146, 255)"></i>
								</div>
								<div v-if="scope.row.thirteen == '旷工'">
									<i class="el-icon-circle-close" style="color: rgb(253, 116, 142)"></i>
								</div>
								<div v-if="scope.row.thirteen == '漏签'">
									<i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
								</div>
								<div v-if="scope.row.thirteen == '请假'">
									<i class="el-icon-s-claim" style="color: rgb(77, 194, 247)"></i>
								</div>
								<div v-if="scope.row.thirteen == '出差'">
									<i class="el-icon-s-promotion" style="color: rgb(72, 198, 80)"></i>
								</div>
								<div v-if="scope.row.thirteen == '外出'">
									<i class="el-icon-suitcase" style="color: rgb(90, 147, 255)"></i>
								</div>
								<div v-if="scope.row.thirteen == '加班'">
									<i class="el-icon-alarm-clock" style="color: rgb(141, 107, 243)"></i>
								</div>
								<div v-if="scope.row.thirteen == '公休'">
									<i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="fourteen" label="14" width="50" align="center">
							<template slot-scope="scope">
								<div v-if="scope.row.fourteen == '正常'">
									<i class="el-icon-circle-check" style="color: rgb(56, 187, 246)"></i>
								</div>
								<div v-if="scope.row.fourteen == '迟到'">
									<i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
								</div>
								<div v-if="scope.row.fourteen == '早退'">
									<i class="el-icon-warning-outline" style="color: rgb(184, 146, 255)"></i>
								</div>
								<div v-if="scope.row.fourteen == '旷工'">
									<i class="el-icon-circle-close" style="color: rgb(253, 116, 142)"></i>
								</div>
								<div v-if="scope.row.fourteen == '漏签'">
									<i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
								</div>
								<div v-if="scope.row.fourteen == '请假'">
									<i class="el-icon-s-claim" style="color: rgb(77, 194, 247)"></i>
								</div>
								<div v-if="scope.row.fourteen == '出差'">
									<i class="el-icon-s-promotion" style="color: rgb(72, 198, 80)"></i>
								</div>
								<div v-if="scope.row.fourteen == '外出'">
									<i class="el-icon-suitcase" style="color: rgb(90, 147, 255)"></i>
								</div>
								<div v-if="scope.row.fourteen == '加班'">
									<i class="el-icon-alarm-clock" style="color: rgb(141, 107, 243)"></i>
								</div>
								<div v-if="scope.row.fourteen == '公休'">
									<i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="fifteen" label="15" width="50" align="center">
							<template slot-scope="scope">
								<div v-if="scope.row.fifteen == '正常'">
									<i class="el-icon-circle-check" style="color: rgb(56, 187, 246)"></i>
								</div>
								<div v-if="scope.row.fifteen == '迟到'">
									<i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
								</div>
								<div v-if="scope.row.fifteen == '早退'">
									<i class="el-icon-warning-outline" style="color: rgb(184, 146, 255)"></i>
								</div>
								<div v-if="scope.row.fifteen == '旷工'">
									<i class="el-icon-circle-close" style="color: rgb(253, 116, 142)"></i>
								</div>
								<div v-if="scope.row.fifteen == '漏签'">
									<i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
								</div>
								<div v-if="scope.row.fifteen == '请假'">
									<i class="el-icon-s-claim" style="color: rgb(77, 194, 247)"></i>
								</div>
								<div v-if="scope.row.fifteen == '出差'">
									<i class="el-icon-s-promotion" style="color: rgb(72, 198, 80)"></i>
								</div>
								<div v-if="scope.row.fifteen == '外出'">
									<i class="el-icon-suitcase" style="color: rgb(90, 147, 255)"></i>
								</div>
								<div v-if="scope.row.fifteen == '加班'">
									<i class="el-icon-alarm-clock" style="color: rgb(141, 107, 243)"></i>
								</div>
								<div v-if="scope.row.fifteen == '公休'">
									<i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="sixteen" label="16" width="50" align="center">
							<template slot-scope="scope">
								<div v-if="scope.row.sixteen == '正常'">
									<i class="el-icon-circle-check" style="color: rgb(56, 187, 246)"></i>
								</div>
								<div v-if="scope.row.sixteen == '迟到'">
									<i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
								</div>
								<div v-if="scope.row.sixteen == '早退'">
									<i class="el-icon-warning-outline" style="color: rgb(184, 146, 255)"></i>
								</div>
								<div v-if="scope.row.sixteen == '旷工'">
									<i class="el-icon-circle-close" style="color: rgb(253, 116, 142)"></i>
								</div>
								<div v-if="scope.row.sixteen == '漏签'">
									<i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
								</div>
								<div v-if="scope.row.sixteen == '请假'">
									<i class="el-icon-s-claim" style="color: rgb(77, 194, 247)"></i>
								</div>
								<div v-if="scope.row.sixteen == '出差'">
									<i class="el-icon-s-promotion" style="color: rgb(72, 198, 80)"></i>
								</div>
								<div v-if="scope.row.sixteen == '外出'">
									<i class="el-icon-suitcase" style="color: rgb(90, 147, 255)"></i>
								</div>
								<div v-if="scope.row.sixteen == '加班'">
									<i class="el-icon-alarm-clock" style="color: rgb(141, 107, 243)"></i>
								</div>
								<div v-if="scope.row.sixteen == '公休'">
									<i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="seventeen" label="17" width="50" align="center">
							<template slot-scope="scope">
								<div v-if="scope.row.seventeen == '正常'">
									<i class="el-icon-circle-check" style="color: rgb(56, 187, 246)"></i>
								</div>
								<div v-if="scope.row.seventeen == '迟到'">
									<i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
								</div>
								<div v-if="scope.row.seventeen == '早退'">
									<i class="el-icon-warning-outline" style="color: rgb(184, 146, 255)"></i>
								</div>
								<div v-if="scope.row.seventeen == '旷工'">
									<i class="el-icon-circle-close" style="color: rgb(253, 116, 142)"></i>
								</div>
								<div v-if="scope.row.seventeen == '漏签'">
									<i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
								</div>
								<div v-if="scope.row.seventeen == '请假'">
									<i class="el-icon-s-claim" style="color: rgb(77, 194, 247)"></i>
								</div>
								<div v-if="scope.row.seventeen == '出差'">
									<i class="el-icon-s-promotion" style="color: rgb(72, 198, 80)"></i>
								</div>
								<div v-if="scope.row.seventeen == '外出'">
									<i class="el-icon-suitcase" style="color: rgb(90, 147, 255)"></i>
								</div>
								<div v-if="scope.row.seventeen == '加班'">
									<i class="el-icon-alarm-clock" style="color: rgb(141, 107, 243)"></i>
								</div>
								<div v-if="scope.row.seventeen == '公休'">
									<i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="eighteen" label="18" width="50" align="center">
							<template slot-scope="scope">
								<div v-if="scope.row.eighteen == '正常'">
									<i class="el-icon-circle-check" style="color: rgb(56, 187, 246)"></i>
								</div>
								<div v-if="scope.row.eighteen == '迟到'">
									<i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
								</div>
								<div v-if="scope.row.eighteen == '早退'">
									<i class="el-icon-warning-outline" style="color: rgb(184, 146, 255)"></i>
								</div>
								<div v-if="scope.row.eighteen == '旷工'">
									<i class="el-icon-circle-close" style="color: rgb(253, 116, 142)"></i>
								</div>
								<div v-if="scope.row.eighteen == '漏签'">
									<i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
								</div>
								<div v-if="scope.row.eighteen == '请假'">
									<i class="el-icon-s-claim" style="color: rgb(77, 194, 247)"></i>
								</div>
								<div v-if="scope.row.eighteen == '出差'">
									<i class="el-icon-s-promotion" style="color: rgb(72, 198, 80)"></i>
								</div>
								<div v-if="scope.row.eighteen == '外出'">
									<i class="el-icon-suitcase" style="color: rgb(90, 147, 255)"></i>
								</div>
								<div v-if="scope.row.eighteen == '加班'">
									<i class="el-icon-alarm-clock" style="color: rgb(141, 107, 243)"></i>
								</div>
								<div v-if="scope.row.eighteen == '公休'">
									<i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="nineteen" label="19" width="50" align="center">
							<template slot-scope="scope">
								<div v-if="scope.row.nineteen == '正常'">
									<i class="el-icon-circle-check" style="color: rgb(56, 187, 246)"></i>
								</div>
								<div v-if="scope.row.nineteen == '迟到'">
									<i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
								</div>
								<div v-if="scope.row.nineteen == '早退'">
									<i class="el-icon-warning-outline" style="color: rgb(184, 146, 255)"></i>
								</div>
								<div v-if="scope.row.nineteen == '旷工'">
									<i class="el-icon-circle-close" style="color: rgb(253, 116, 142)"></i>
								</div>
								<div v-if="scope.row.nineteen == '漏签'">
									<i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
								</div>
								<div v-if="scope.row.nineteen == '请假'">
									<i class="el-icon-s-claim" style="color: rgb(77, 194, 247)"></i>
								</div>
								<div v-if="scope.row.nineteen == '出差'">
									<i class="el-icon-s-promotion" style="color: rgb(72, 198, 80)"></i>
								</div>
								<div v-if="scope.row.nineteen == '外出'">
									<i class="el-icon-suitcase" style="color: rgb(90, 147, 255)"></i>
								</div>
								<div v-if="scope.row.nineteen == '加班'">
									<i class="el-icon-alarm-clock" style="color: rgb(141, 107, 243)"></i>
								</div>
								<div v-if="scope.row.nineteen == '公休'">
									<i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="twenty" label="20" width="50" align="center">
							<template slot-scope="scope">
								<div v-if="scope.row.twenty == '正常'">
									<i class="el-icon-circle-check" style="color: rgb(56, 187, 246)"></i>
								</div>
								<div v-if="scope.row.twenty == '迟到'">
									<i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
								</div>
								<div v-if="scope.row.twenty == '早退'">
									<i class="el-icon-warning-outline" style="color: rgb(184, 146, 255)"></i>
								</div>
								<div v-if="scope.row.twenty == '旷工'">
									<i class="el-icon-circle-close" style="color: rgb(253, 116, 142)"></i>
								</div>
								<div v-if="scope.row.twenty == '漏签'">
									<i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
								</div>
								<div v-if="scope.row.twenty == '请假'">
									<i class="el-icon-s-claim" style="color: rgb(77, 194, 247)"></i>
								</div>
								<div v-if="scope.row.twenty == '出差'">
									<i class="el-icon-s-promotion" style="color: rgb(72, 198, 80)"></i>
								</div>
								<div v-if="scope.row.twenty == '外出'">
									<i class="el-icon-suitcase" style="color: rgb(90, 147, 255)"></i>
								</div>
								<div v-if="scope.row.twenty == '加班'">
									<i class="el-icon-alarm-clock" style="color: rgb(141, 107, 243)"></i>
								</div>
								<div v-if="scope.row.twenty == '公休'">
									<i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="twentyone" label="21" width="50" align="center">
							<template slot-scope="scope">
								<div v-if="scope.row.twentyone == '正常'">
									<i class="el-icon-circle-check" style="color: rgb(56, 187, 246)"></i>
								</div>
								<div v-if="scope.row.twentyone == '迟到'">
									<i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
								</div>
								<div v-if="scope.row.twentyone == '早退'">
									<i class="el-icon-warning-outline" style="color: rgb(184, 146, 255)"></i>
								</div>
								<div v-if="scope.row.twentyone == '旷工'">
									<i class="el-icon-circle-close" style="color: rgb(253, 116, 142)"></i>
								</div>
								<div v-if="scope.row.twentyone == '漏签'">
									<i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
								</div>
								<div v-if="scope.row.twentyone == '请假'">
									<i class="el-icon-s-claim" style="color: rgb(77, 194, 247)"></i>
								</div>
								<div v-if="scope.row.twentyone == '出差'">
									<i class="el-icon-s-promotion" style="color: rgb(72, 198, 80)"></i>
								</div>
								<div v-if="scope.row.twentyone == '外出'">
									<i class="el-icon-suitcase" style="color: rgb(90, 147, 255)"></i>
								</div>
								<div v-if="scope.row.twentyone == '加班'">
									<i class="el-icon-alarm-clock" style="color: rgb(141, 107, 243)"></i>
								</div>
								<div v-if="scope.row.twentyone == '公休'">
									<i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="twentytwo" label="22" width="50" align="center">
							<template slot-scope="scope">
								<div v-if="scope.row.twentytwo == '正常'">
									<i class="el-icon-circle-check" style="color: rgb(56, 187, 246)"></i>
								</div>
								<div v-if="scope.row.twentytwo == '迟到'">
									<i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
								</div>
								<div v-if="scope.row.twentytwo == '早退'">
									<i class="el-icon-warning-outline" style="color: rgb(184, 146, 255)"></i>
								</div>
								<div v-if="scope.row.twentytwo == '旷工'">
									<i class="el-icon-circle-close" style="color: rgb(253, 116, 142)"></i>
								</div>
								<div v-if="scope.row.twentytwo == '漏签'">
									<i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
								</div>
								<div v-if="scope.row.twentytwo == '请假'">
									<i class="el-icon-s-claim" style="color: rgb(77, 194, 247)"></i>
								</div>
								<div v-if="scope.row.twentytwo == '出差'">
									<i class="el-icon-s-promotion" style="color: rgb(72, 198, 80)"></i>
								</div>
								<div v-if="scope.row.twentytwo == '外出'">
									<i class="el-icon-suitcase" style="color: rgb(90, 147, 255)"></i>
								</div>
								<div v-if="scope.row.twentytwo == '加班'">
									<i class="el-icon-alarm-clock" style="color: rgb(141, 107, 243)"></i>
								</div>
								<div v-if="scope.row.twentytwo == '公休'">
									<i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="twentythree" label="23" width="50" align="center">
							<template slot-scope="scope">
								<div v-if="scope.row.twentythree == '正常'">
									<i class="el-icon-circle-check" style="color: rgb(56, 187, 246)"></i>
								</div>
								<div v-if="scope.row.twentythree == '迟到'">
									<i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
								</div>
								<div v-if="scope.row.twentythree == '早退'">
									<i class="el-icon-warning-outline" style="color: rgb(184, 146, 255)"></i>
								</div>
								<div v-if="scope.row.twentythree == '旷工'">
									<i class="el-icon-circle-close" style="color: rgb(253, 116, 142)"></i>
								</div>
								<div v-if="scope.row.twentythree == '漏签'">
									<i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
								</div>
								<div v-if="scope.row.twentythree == '请假'">
									<i class="el-icon-s-claim" style="color: rgb(77, 194, 247)"></i>
								</div>
								<div v-if="scope.row.twentythree == '出差'">
									<i class="el-icon-s-promotion" style="color: rgb(72, 198, 80)"></i>
								</div>
								<div v-if="scope.row.twentythree == '外出'">
									<i class="el-icon-suitcase" style="color: rgb(90, 147, 255)"></i>
								</div>
								<div v-if="scope.row.twentythree == '加班'">
									<i class="el-icon-alarm-clock" style="color: rgb(141, 107, 243)"></i>
								</div>
								<div v-if="scope.row.twentythree == '公休'">
									<i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="twentyfour" label="24" width="50" align="center">
							<template slot-scope="scope">
								<div v-if="scope.row.twentyfour == '正常'">
									<i class="el-icon-circle-check" style="color: rgb(56, 187, 246)"></i>
								</div>
								<div v-if="scope.row.twentyfour == '迟到'">
									<i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
								</div>
								<div v-if="scope.row.twentyfour == '早退'">
									<i class="el-icon-warning-outline" style="color: rgb(184, 146, 255)"></i>
								</div>
								<div v-if="scope.row.twentyfour == '旷工'">
									<i class="el-icon-circle-close" style="color: rgb(253, 116, 142)"></i>
								</div>
								<div v-if="scope.row.twentyfour == '漏签'">
									<i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
								</div>
								<div v-if="scope.row.twentyfour == '请假'">
									<i class="el-icon-s-claim" style="color: rgb(77, 194, 247)"></i>
								</div>
								<div v-if="scope.row.twentyfour == '出差'">
									<i class="el-icon-s-promotion" style="color: rgb(72, 198, 80)"></i>
								</div>
								<div v-if="scope.row.twentyfour == '外出'">
									<i class="el-icon-suitcase" style="color: rgb(90, 147, 255)"></i>
								</div>
								<div v-if="scope.row.twentyfour == '加班'">
									<i class="el-icon-alarm-clock" style="color: rgb(141, 107, 243)"></i>
								</div>
								<div v-if="scope.row.twentyfour == '公休'">
									<i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="twentyfive" label="25" width="50" align="center">
							<template slot-scope="scope">
								<div v-if="scope.row.twentyfive == '正常'">
									<i class="el-icon-circle-check" style="color: rgb(56, 187, 246)"></i>
								</div>
								<div v-if="scope.row.twentyfive == '迟到'">
									<i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
								</div>
								<div v-if="scope.row.twentyfive == '早退'">
									<i class="el-icon-warning-outline" style="color: rgb(184, 146, 255)"></i>
								</div>
								<div v-if="scope.row.twentyfive == '旷工'">
									<i class="el-icon-circle-close" style="color: rgb(253, 116, 142)"></i>
								</div>
								<div v-if="scope.row.twentyfive == '漏签'">
									<i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
								</div>
								<div v-if="scope.row.twentyfive == '请假'">
									<i class="el-icon-s-claim" style="color: rgb(77, 194, 247)"></i>
								</div>
								<div v-if="scope.row.twentyfive == '出差'">
									<i class="el-icon-s-promotion" style="color: rgb(72, 198, 80)"></i>
								</div>
								<div v-if="scope.row.twentyfive == '外出'">
									<i class="el-icon-suitcase" style="color: rgb(90, 147, 255)"></i>
								</div>
								<div v-if="scope.row.twentyfive == '加班'">
									<i class="el-icon-alarm-clock" style="color: rgb(141, 107, 243)"></i>
								</div>
								<div v-if="scope.row.twentyfive == '公休'">
									<i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="twentysix" label="26" width="50" align="center">
							<template slot-scope="scope">
								<div v-if="scope.row.twentysix == '正常'">
									<i class="el-icon-circle-check" style="color: rgb(56, 187, 246)"></i>
								</div>
								<div v-if="scope.row.twentysix == '迟到'">
									<i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
								</div>
								<div v-if="scope.row.twentysix == '早退'">
									<i class="el-icon-warning-outline" style="color: rgb(184, 146, 255)"></i>
								</div>
								<div v-if="scope.row.twentysix == '旷工'">
									<i class="el-icon-circle-close" style="color: rgb(253, 116, 142)"></i>
								</div>
								<div v-if="scope.row.twentysix == '漏签'">
									<i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
								</div>
								<div v-if="scope.row.twentysix == '请假'">
									<i class="el-icon-s-claim" style="color: rgb(77, 194, 247)"></i>
								</div>
								<div v-if="scope.row.twentysix == '出差'">
									<i class="el-icon-s-promotion" style="color: rgb(72, 198, 80)"></i>
								</div>
								<div v-if="scope.row.twentysix == '外出'">
									<i class="el-icon-suitcase" style="color: rgb(90, 147, 255)"></i>
								</div>
								<div v-if="scope.row.twentysix == '加班'">
									<i class="el-icon-alarm-clock" style="color: rgb(141, 107, 243)"></i>
								</div>
								<div v-if="scope.row.twentysix == '公休'">
									<i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="twentyseven" label="27" width="50" align="center">
							<template slot-scope="scope">
								<div v-if="scope.row.twentyseven == '正常'">
									<i class="el-icon-circle-check" style="color: rgb(56, 187, 246)"></i>
								</div>
								<div v-if="scope.row.twentyseven == '迟到'">
									<i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
								</div>
								<div v-if="scope.row.twentyseven == '早退'">
									<i class="el-icon-warning-outline" style="color: rgb(184, 146, 255)"></i>
								</div>
								<div v-if="scope.row.twentyseven == '旷工'">
									<i class="el-icon-circle-close" style="color: rgb(253, 116, 142)"></i>
								</div>
								<div v-if="scope.row.twentyseven == '漏签'">
									<i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
								</div>
								<div v-if="scope.row.twentyseven == '请假'">
									<i class="el-icon-s-claim" style="color: rgb(77, 194, 247)"></i>
								</div>
								<div v-if="scope.row.twentyseven == '出差'">
									<i class="el-icon-s-promotion" style="color: rgb(72, 198, 80)"></i>
								</div>
								<div v-if="scope.row.twentyseven == '外出'">
									<i class="el-icon-suitcase" style="color: rgb(90, 147, 255)"></i>
								</div>
								<div v-if="scope.row.twentyseven == '加班'">
									<i class="el-icon-alarm-clock" style="color: rgb(141, 107, 243)"></i>
								</div>
								<div v-if="scope.row.twentyseven == '公休'">
									<i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="twentyeight" label="28" width="50" align="center">
							<template slot-scope="scope">
								<div v-if="scope.row.twentyeight == '正常'">
									<i class="el-icon-circle-check" style="color: rgb(56, 187, 246)"></i>
								</div>
								<div v-if="scope.row.twentyeight == '迟到'">
									<i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
								</div>
								<div v-if="scope.row.twentyeight == '早退'">
									<i class="el-icon-warning-outline" style="color: rgb(184, 146, 255)"></i>
								</div>
								<div v-if="scope.row.twentyeight == '旷工'">
									<i class="el-icon-circle-close" style="color: rgb(253, 116, 142)"></i>
								</div>
								<div v-if="scope.row.twentyeight == '漏签'">
									<i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
								</div>
								<div v-if="scope.row.twentyeight == '请假'">
									<i class="el-icon-s-claim" style="color: rgb(77, 194, 247)"></i>
								</div>
								<div v-if="scope.row.twentyeight == '出差'">
									<i class="el-icon-s-promotion" style="color: rgb(72, 198, 80)"></i>
								</div>
								<div v-if="scope.row.twentyeight == '外出'">
									<i class="el-icon-suitcase" style="color: rgb(90, 147, 255)"></i>
								</div>
								<div v-if="scope.row.twentyeight == '加班'">
									<i class="el-icon-alarm-clock" style="color: rgb(141, 107, 243)"></i>
								</div>
								<div v-if="scope.row.twentyeight == '公休'">
									<i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="twentynine" label="29" width="50" align="center">
							<template slot-scope="scope">
								<div v-if="scope.row.twentynine == '正常'">
									<i class="el-icon-circle-check" style="color: rgb(56, 187, 246)"></i>
								</div>
								<div v-if="scope.row.twentynine == '迟到'">
									<i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
								</div>
								<div v-if="scope.row.twentynine == '早退'">
									<i class="el-icon-warning-outline" style="color: rgb(184, 146, 255)"></i>
								</div>
								<div v-if="scope.row.twentynine == '旷工'">
									<i class="el-icon-circle-close" style="color: rgb(253, 116, 142)"></i>
								</div>
								<div v-if="scope.row.twentynine == '漏签'">
									<i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
								</div>
								<div v-if="scope.row.twentynine == '请假'">
									<i class="el-icon-s-claim" style="color: rgb(77, 194, 247)"></i>
								</div>
								<div v-if="scope.row.twentynine == '出差'">
									<i class="el-icon-s-promotion" style="color: rgb(72, 198, 80)"></i>
								</div>
								<div v-if="scope.row.twentynine == '外出'">
									<i class="el-icon-suitcase" style="color: rgb(90, 147, 255)"></i>
								</div>
								<div v-if="scope.row.twentynine == '加班'">
									<i class="el-icon-alarm-clock" style="color: rgb(141, 107, 243)"></i>
								</div>
								<div v-if="scope.row.twentynine == '公休'">
									<i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="thirty" label="30" width="50" align="center">
							<template slot-scope="scope">
								<div v-if="scope.row.thirty == '正常'">
									<i class="el-icon-circle-check" style="color: rgb(56, 187, 246)"></i>
								</div>
								<div v-if="scope.row.thirty == '迟到'">
									<i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
								</div>
								<div v-if="scope.row.thirty == '早退'">
									<i class="el-icon-warning-outline" style="color: rgb(184, 146, 255)"></i>
								</div>
								<div v-if="scope.row.thirty == '旷工'">
									<i class="el-icon-circle-close" style="color: rgb(253, 116, 142)"></i>
								</div>
								<div v-if="scope.row.thirty == '漏签'">
									<i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
								</div>
								<div v-if="scope.row.thirty == '请假'">
									<i class="el-icon-s-claim" style="color: rgb(77, 194, 247)"></i>
								</div>
								<div v-if="scope.row.thirty == '出差'">
									<i class="el-icon-s-promotion" style="color: rgb(72, 198, 80)"></i>
								</div>
								<div v-if="scope.row.thirty == '外出'">
									<i class="el-icon-suitcase" style="color: rgb(90, 147, 255)"></i>
								</div>
								<div v-if="scope.row.thirty == '加班'">
									<i class="el-icon-alarm-clock" style="color: rgb(141, 107, 243)"></i>
								</div>
								<div v-if="scope.row.thirty == '公休'">
									<i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="thirtyone" label="31" width="50" align="center">
							<template slot-scope="scope">
								<div v-if="scope.row.thirtyone == '正常'">
									<i class="el-icon-circle-check" style="color: rgb(56, 187, 246)"></i>
								</div>
								<div v-if="scope.row.thirtyone == '迟到'">
									<i class="el-icon-bell" style="color: rgb(255, 0, 0)"></i>
								</div>
								<div v-if="scope.row.thirtyone == '早退'">
									<i class="el-icon-warning-outline" style="color: rgb(184, 146, 255)"></i>
								</div>
								<div v-if="scope.row.thirtyone == '旷工'">
									<i class="el-icon-circle-close" style="color: rgb(253, 116, 142)"></i>
								</div>
								<div v-if="scope.row.thirtyone == '漏签'">
									<i class="el-icon-stopwatch" style="color: rgb(209, 85, 233)"></i>
								</div>
								<div v-if="scope.row.thirtyone == '请假'">
									<i class="el-icon-s-claim" style="color: rgb(77, 194, 247)"></i>
								</div>
								<div v-if="scope.row.thirtyone == '出差'">
									<i class="el-icon-s-promotion" style="color: rgb(72, 198, 80)"></i>
								</div>
								<div v-if="scope.row.thirtyone == '外出'">
									<i class="el-icon-suitcase" style="color: rgb(90, 147, 255)"></i>
								</div>
								<div v-if="scope.row.thirtyone == '加班'">
									<i class="el-icon-alarm-clock" style="color: rgb(141, 107, 243)"></i>
								</div>
								<div v-if="scope.row.thirtyone == '公休'">
									<i class="el-icon-s-home" style="color: rgb(153, 153, 153)"></i>
								</div>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination @size-change="attachedListHandleSize" @current-change="attachedListHandleCurrent"
						:current-page.sync="attachedListPageNo" :page-size="attachedListPageSize"
						layout="total, prev, pager, next, jumper" :total="attachedListTotal">
					</el-pagination>
				</el-tab-pane>
				<div class="icon">
					<i class="el-icon-star-on" style="margin: 0 2px"></i>
					<span>图标说明:</span>
					<div class="icon_tb">
						<i class="el-icon-circle-check" style="color: #00b7ee; font-size: 16px; margin: 0 2px"></i>
						正常
					</div>
					<div class="icon_tb">
						<i class="el-icon-bell" style="color: #FF0000; font-size: 16px; margin: 0 2px"></i>
						迟到
					</div>
					<div class="icon_tb">
						<i class="el-icon-warning-outline" style="color: #b892ff; font-size: 16px; margin: 0 2px"></i>
						早退
					</div>
					<div class="icon_tb">
						<i class="el-icon-circle-close" style="color: #fd748e; font-size: 16px; margin: 0 2px"></i>
						旷工
					</div>
					<div class="icon_tb">
						<i class="el-icon-stopwatch" style="color: #d155e9; font-size: 16px; margin: 0 2px"></i>
						漏签
					</div>
					<div class="icon_tb">
						<i class="el-icon-s-claim" style="color: #4dc2f7; font-size: 16px; margin: 0 2px"></i>
						请假
					</div>
					<div class="icon_tb">
						<i class="el-icon-s-promotion" style="color: #48c650; font-size: 16px; margin: 0 2px"></i>
						出差
					</div>
					<div class="icon_tb">
						<i class="el-icon-suitcase" style="color: #ff9a17; font-size: 16px; margin: 0 2px"></i>
						外出
					</div>
					<div class="icon_tb">
						<i class="el-icon-alarm-clock" style="color: #8d6bf3; font-size: 16px; margin: 0 2px"></i>
						加班
					</div>
					<div class="icon_tb">
						<i class="el-icon-s-home" style="color: #999999; font-size: 16px; margin: 0 2px"></i>
						公休
					</div>
				</div>
				<div style="font-size: 11px;display: flex;">
					<div style="flex:1">
						<i class="el-icon-s-grid" style="padding-left: 2px"></i>
						打卡明细
					</div>
					<div>
						<el-button type="primary" size="small" @click="exportAttendanceDialog=true">导出考勤</el-button>
					</div>
				</div>
				<div style="margin-top: 10px">
					<template>
						<el-table :data="checkDetailsTable" :cell-style="cellStyle" style="border: 1px solid #d6cfe2"
							size="small" :header-cell-class-name="cellHeadStyle" :row-class-name="tableRowClassName"
							row-key="id" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
							v-loading="checkDetailsLoading" :empty-text="emptyText">
							<el-table-column prop="name" label="姓名" align="center"></el-table-column>
							<el-table-column prop="department.name" label="部门">
							</el-table-column>
							<el-table-column prop="date" label="日期"> </el-table-column>
							<el-table-column prop="worktime" label="工作时段">
							</el-table-column>
							<el-table-column prop="time" label="签到时间/体温">
							</el-table-column>
							<el-table-column prop="time2" label="签退时间/体温">
							</el-table-column>
						</el-table>
					</template>
				</div>
				<el-dialog width="40%" :visible.sync="exportAttendanceDialog" title="导出考勤">
					<el-date-picker v-model="exportAttendanceData" format="yyyy-MM" value-format="yyyy-MM" type="month"
						size="small" :clearable="false" placeholder="请选择日期"></el-date-picker>
					<div slot="footer" class="dialog-footer">
						<el-button size="small" @click="exportAttendanceDialog = false">取 消</el-button>
						<el-button size="small" type="primary" @click="exportAttendances()">确 定</el-button>
					</div>
				</el-dialog>
			</el-tabs>
		</div>
	</div>
</template>
<script>
	import tableStyles from "../../../../utils/mixins.js";
	export default {
		mixins: [tableStyles],
		data() {
			return {
				// 公司ID
				companyId: "",
				//搜索对象
				attendanceRecordSearch: {
					date: "",
					office: "",
					username: "",
					phone: "",
				},
				offices: [], //部门的数组

				attachedListNum: "全部记录", //tab标签绑定值
				attachedList: [{
						name: "全部记录"
					},
					{
						name: "迟到"
					},
					{
						name: "早退"
					},
					{
						name: "请假"
					},
					{
						name: "出差"
					},
					{
						name: "外出"
					},
					{
						name: "加班"
					},
				],
				attachedListTable: [], //附表数据数组
				attachedListPageNo: 1, //页码
				attachedListPageSize: 10, //每页几条
				attachedListTotal: 0, //总条数
				loading: "",
				statusType: "", //除全部记录外其他接口不同状态

				checkDetailsTable: [], //打卡明细数组
				checkDetailsLoading: "",
				emptyText: "点击上述日历查看每天的打卡明细", //初始明细为空提示
				day: "",
				cellid: "",
				//导出考勤
				exportAttendanceDialog:false,
				exportAttendanceData:"",
			};
		},
		//接收ID参数
		created() {
			this.companyId = this.$route.query.id;
		},
		mounted() {
			this.getOffices(); //部门
			this.getCurrentDate();
			this.handleClick();
		},
		methods: {
			exportAttendances(){
				window.location.href = process.env.VUE_APP_SERVER_URL+"/sys/user/userCheckin/exportDays?date="+this.exportAttendanceData+"&officeId="+this.$store.state.user.companyId;
				this.exportAttendanceDialog=false;
			},
			//当前日期
			getCurrentDate() {
				var date = new Date();
				var y = date.getFullYear();
				var m =
					date.getMonth() + 1 < 10 ?
					"0" + (date.getMonth() + 1) :
					date.getMonth() + 1;
				var d = date.getDate();
				this.attendanceRecordSearch.date = y + "-" + m;
			},
			// ------------------------------------------------------
			//部门查询
			getOffices() {
				this.$http({
					url: "/sys/person/findOffice",
					method: "get",
					params: {
						companyId: this.companyId,
					},
				}).then(({
					data
				}) => {
					// console.log("部门",data);
					if (data) {
						this.offices = data.children;
					}
				});
			},
			//重置搜索
			resetSearch() {
				this.attendanceRecordSearch.username = "";
				this.attendanceRecordSearch.phone = "";
				this.attendanceRecordSearch.office = "";
				this.getCurrentDate();
				this.getCompleteDocumentation();
			},

			handleClick(tab, event) {
				switch (this.attachedListNum) {
					case "全部记录":
						this.getCompleteDocumentation();
						break;
					case "迟到":
						this.getDetails(1);
						break;
					case "早退":
						this.getDetails(2);
						break;
					case "请假":
						this.getDetails(3);
						break;
					case "出差":
						this.getDetails(4);
						break;
					case "外出":
						this.getDetails(5);
						break;
					case "加班":
						this.getDetails(6);
						break;
				}
			},

			//附表翻页
			attachedListHandleSize(val) {
				this.attachedListPageSize = val;
				this.attachedListPageNo = 1;
				this.getCompleteDocumentation();
			},
			attachedListHandleCurrent(val) {
				this.attachedListPageNo = val;
				this.getCompleteDocumentation();
			},
			//查询全部记录
			getCompleteDocumentation() {
				this.loading = true;
				this.$http({
					url: "/sys/person/findCheckin",
					method: "get",
					params: {
						//一定要设置name，才可以传params
						pageNo: this.attachedListPageNo,
						pageSize: this.attachedListPageSize,
						companyId: this.companyId,
						date: this.attendanceRecordSearch.date,
						...this.attendanceRecordSearch,
					},
				}).then(({
					data
				}) => {
					// console.log(data);
					if (data) {
						this.attachedListTable = data.page;
						if (this.attachedListTable.length == 0) {
							this.attachedListTotal = 0;
						} else {
							this.attachedListTotal = data.totalCount;
						}
						this.loading = false;
					}
				});
			},

			//剩余页面查询接口  迟到 早退 请假 出差 外出 加班
			getDetails(id) {
				this.loading = true;
				this.$http({
					url: "/sys/person/selectByType",
					method: "get",
					params: {
						//一定要设置name，才可以传params
						pageNo: this.attachedListPageNo,
						pageSize: this.attachedListPageSize,
						companyId: this.companyId,
						date: this.attendanceRecordSearch.date,
						type: id,
					},
				}).then(({
					data
				}) => {
					// console.log(data);
					if (data && data.success) {
						this.attachedListTable = data.list;
						if (this.attachedListTable.length == 0) {
							this.attachedListTotal = 0;
						} else {
							this.attachedListTotal = data.totalCount;
						}
						this.loading = false;
					}
				});
			},
			//打卡明细
			cellDetail(row, column, event, cell) {
				// console.log(row,column)
				this.cellid = row.sysuserid;
				// 点击表格获取日
				this.day = column.label;
				if (
					column.className == "el-table-column--selection" ||
					this.day == "姓名" ||
					this.day == "部门" ||
					this.day == "电话"
				) {
					this.checkDetailsTable = [];
					return false;
				}
				if (this.day < 10) {
					this.day = "0" + this.day;
				}
				var dateOfTime = this.attendanceRecordSearch.date + "-" + this.day;
				this.checkDetailsLoading = true;
				this.$http({
					url: "/sys/user/userCheckin/selectchickdetail",
					method: "get",
					params: {
						//一定要设置name，才可以传params
						dateOfTime: dateOfTime,
						userid: this.cellid,
					},
				}).then(({
					data
				}) => {
					// console.log(data);
					if (data && data.success) {
						this.checkDetailsTable = data.list;
						if (this.checkDetailsTable.length == 0) {
							this.emptyText = "暂无数据";
						}
						this.checkDetailsLoading = false;
					}
				});
			},
		},
	};
</script>
<style scoped>
	.icon {
		width: 100%;
		display: flex;
		flex-direction: row;
		padding: 0 0 1rem;
		align-items: center;
		font-size: 11px;
	}

	.icon_tb {
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 11px;
		color: black;
		margin-right: 10px;
	}

	/deep/ .el-tabs--border-card>.el-tabs__content {
		padding: 10px;
	}
</style>
